<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/htmlcss/htmlcss.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.1.min.js"></script>

</head>
<body >
<div class="container-fluid">
    <h1>全体学生名单</h1>
    <!-- Button trigger modal -->
    <button style="float: right" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
        新增学生
    </button>
    <div class="shadow-lg p-3 mb-5 bg-white rounded">
        <table class="table table-dark table-hover table-bordered">
            <thead class="thead-light">
            <tr>
                <th style="width: 30px">#</th>
                <th style="width: 100px">姓名</th>
                <th style="width: 100px">性别</th>
                <th style="width: 100px">成绩</th>
                <th style="width: 100px">操作</th>
            </tr>
            </thead>
            <tbody id="studentTb">
            </tbody>
        </table>
    </div>
    <!--    <h2>按姓名查询学生名单</h2>-->
    <!--    <table class="table table-bordered ">-->
    <!--        <thead>-->
    <!--        <tr class="table-primary">-->
    <!--            <th>#</th>-->
    <!--            <th>姓名</th>-->
    <!--            <th>性别</th>-->
    <!--            <th>成绩</th>-->
    <!--            <th>操作</th>-->
    <!--        </tr>-->
    <!--        </thead>-->
    <!--        <tbody id="selectbynameTb">-->


    <!--        </tbody>-->
    <!--    </table>-->
</div>
<div class="modal fade" tabindex="-1" role="dialog"  id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">

                <form id="formStudent">
                    <input hidden="hidden" id="id"  name="id"/>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="possword" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="name">成绩</label>
                        <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
                    </div>
                </form>
                <!--                表单结束-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveStudent();">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="/js/bootstrap.js"></script>
<script type="text/javascript">



    function preAdd(){
        $("#id").val(0);
    }
    //新增或者更新
    function saveStudent(){
        var data=$("#formStudent").serialize()
        var id=$("#id").val();
        if(id<1){
            //是新增
            $.ajax({
                url:"/webapi/student/insert",
                method:"post",
                data:data
            }).done(function (){
                $('#stuTable').bootstrapTable("destroy");

                loadTable();

                $('#myModal').modal('hide')
            })
        }
        else{
            //是更新
            $.ajax({
                url:"/webapi/student/update",
                method:"put",
                data:data
            }).done(function (){
                loadTable();
                $('#myModal').modal('hide')
            })
        }


    }

    function editStudent(id){
        $('#myModal').modal('show')

        $.ajax({
            url:'/webapi/student/get/'+id
        }).done(function (rs){
            $("#id").val(rs.id);
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#score").val(rs.score);

        })

    }


    function  deleteStudent(id){
        if(confirm("你是否真的要删除吗？")){
            $.ajax({
                url:"/webapi/student/delete/"+id,
                method:"delete"
            }).done(function (){
                loadTable();
            })
        }// end if

    }
    function loadTable(){
        $.ajax({
            url:'/webapi/student/list'
        }).done(function (rs) {
            //rs是获取到的数据集（实际上就是一个数组 数组里面的每一个元素是查出来的一条记录）
            var len = rs.length;
            var html = "";
            for (var i = 0; i < len; i++) {
                var item = rs[i];
                if(item.sex==2)
                {
                    item.sex="女";
                }
                else if(item.sex==1)
                {
                    item.sex="男";
                }
                else
                {
                    item.sex="不确定";
                }
                html += "<tr>"
                    + "<td>" + item.id + "</td>"
                    + "<td>" + item.name + "</td>"
                    + "<td>" + item.sex + "</td>"
                    + "<td>" + item.score + "</td>"
                    + "<td><a href='#' onclick='editStudent(" +item.id +");'>编辑</a>   <a href='#' onclick='deleteStudent("+item.id+")'>删除</a> </td>"

                    + "</tr>"
            }
            $("#studentTb").html(html);
        })
    }

    $(function () {
        //传递一些参数然后done
        loadTable();


    })
</script>
<script type="text/javascript">
    $(function () {
        //传递一些参数然后done
        $.ajax({
            url:'/name/student/list'
        }).done(function (xs) {
            //xs是获取到的数据集（实际上就是一个数组 数组里面的每一个元素是查出来的一条记录）
            var len = xs.length;
            var html = "";
            for (var i = 0; i < len; i++) {
                var item = xs[i];

                if(item.sex==2)
                {
                    item.sex="女";
                }
                else if(item.sex==1)
                {
                    item.sex="男";
                }
                else
                {
                    item.sex="不确定";
                }
                html += "<tr>"
                    + "<td>" + item.id + "</td>"
                    + "<td>" + item.name + "</td>"
                    + "<td>" + item.sex + "</td>"
                    + "<td>" + item.score + "</td>"
                    + "</tr>"
            }
            $("#selectbynameTb").html(html);
        })
    })
</script>
</body>
</html>